<template>
  <div style="width:240px;">
      <div class="wrap" style="display: flex;
        justify-content: space-between;
        border-bottom: 2px solid rgba(255, 255, 255);">
          <div style="width: 110px;
            height: 120px;
            display: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;">
              <img src="../assets/11.png" style="position: absolute;" alt="">
              <div class="data" style="flex: 1.6;
                font-size: 24px;
                display: flex;
                justify-content: center;
                align-items: flex-end;">{{datalist[0].data}}</div>
              <div class="unit" style="flex: 0.7;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.336);">{{datalist[0].unit}}</div>
              <div class="title" style="flex: 1;
                font-size: 13px;
                display: flex;
                align-items: center;">{{datalist[0].title}}</div>
          </div>
          <div style="width: 110px;
            height: 120px;
            display: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;">
              <img src="../assets/11.png" style="position: absolute;" alt="">
              <div class="data" style="flex: 1.6;
                font-size: 24px;
                display: flex;
                justify-content: center;
                align-items: flex-end;">{{datalist[1].data}}</div>
              <div class="unit" style="flex: 0.7;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.336);">{{datalist[1].unit}}</div>
              <div class="title" style="flex: 1;
                font-size: 13px;
                display: flex;
                align-items: center;">{{datalist[1].title}}</div>
          </div>
      </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data() {
        return {
            datalist: [
                {
                    data: 5737,
                    unit: 'MW',
                    title: '综合能源运行功率'
                },
                {
                    data: 1051,
                    unit: 'MWH',
                    title: '综合能源发电量'
                },
            ]
        }
    },
    methods: {
    },
}
</script>

<style>
/*
.wrap{
    display: flex;
    justify-content: space-between;
    background-color: lightblue;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.wrap > div{
    width: 110px;
    height: 120px;
    display: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}
.wrap > div img{
    position: absolute;
}
.data{
    flex: 1.6;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.unit{
    flex: 0.7;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.336);
}
.title{
    flex: 1;
    font-size: 13px;
    display: flex;
    align-items: center;
}*/
</style>